<template>
  <div class="main-container">
    <div class="header">
      <h1>教职工授权</h1>
      <div class="search">
        <label><strong>搜索用户：</strong></label>
        <el-input v-model="input" placeholder="请输入工号、姓名或手机号" prefix-icon="el-icon-search" size="medium"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
      </div>
    </div>
    <div class="info">
      <div class="info-table">
        <table>
          <thead>
            <tr>
              <th style="width: 120px;">姓名</th>
              <th style="width: 240px;">手机号</th>
              <th style="width: 280px;">工号</th>
              <th style="width: 100px;">状态</th>
              <th style="width: 280px;">操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in currentPageData" :key="index">
              <td>{{ item.uname }}</td>
              <td>{{ item.phone }}</td>
              <td>{{ item.jobNum }}</td>
              <td :style="getStatusStyle(item.search)">{{ item.search ? '启用' : '禁用' }}</td>
              <td>
                <div class="switchs" v-if="item.uname">
                  <el-switch active-color="#13ce66" inactive-color="#ff4949" v-model="item.search" :active-value="true"
                    :inactive-value="false" @change="handleStatusChange(item)" />
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="footer">
      <el-button type="primary" :disabled="currentPage === 1" @click="changePage(currentPage - 1)"
        icon="el-icon-arrow-left"></el-button>
      <span> 第 {{ currentPage }}/{{ totalPages }}页 </span>
      <el-button type="primary" :disabled="currentPage === totalPages" @click="changePage(currentPage + 1)"
        icon="el-icon-arrow-right"></el-button>
    </div>
  </div>
</template>
<script>
import axios from 'axios';

export default {
  data() {
    return {
      input: '',
      currentPage: 1,
      pageSize: 5,
      totalItems: 0,
      users: [],
      originalUsers: [],
    };
  },
  methods: {
    confirmAction() {
      // 执行确定操作
      console.log("确认操作");
    },
    moreAction() {
      // 执行更多操作
      console.log("更多操作");
    },
    changePage(page) {
      if (page < 1 || page > this.totalPages) return;
      this.currentPage = page;
      this.fetchUsers();
    },
    handleSearch() {
      if (!this.input) {
        this.users = this.originalUsers;
        return;
      }
      const searchValue = this.input.toLowerCase();
      this.users = this.originalUsers.filter(item =>
        item.uname.toLowerCase().includes(searchValue) ||
        String(item.jobNum).includes(searchValue) ||
        item.phone.includes(searchValue)
      );
    },
    getStatusStyle(search) {
      if (search) {
        return { color: 'green' };
      } else {
        return { color: 'red' };
      }
    },
    async fetchUsers() {
      try {
        const response = await axios.post('/auth/listUsers');
        this.users = response.data;
        this.originalUsers = [...this.users];
        this.totalItems = this.users.length;
      } catch (error) {
        console.error('Error fetching users:', error);
      }
    },
    async handleStatusChange(item) {
      try {
        await axios.post('/auth/updateUserStatus', {
          job_num: Number(item.jobNum),
          search: item.search
        });
        this.$message.success(`用户 ${item.uname} 的状态已更新为: ${item.search ? '启用' : '禁用'}`)
      } catch (error) {
        console.error('Error updating user status:', error);
      }
    },
  },
  computed: {
    totalPages() {
      return Math.ceil(this.totalItems / this.pageSize);
    },
    currentPageData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.users.slice(start, end);
    },
  },
  mounted() {
    this.fetchUsers();
  },
  watch: {
    currentPage: 'fetchUsers'
  }
};
</script>
<style scoped>
.main-container {
  padding: 20px;
  background-color: #f0f5ff;
}

h1 {
  font-size: 64px;
  font-weight: bold;
}

.info-table table {
  width: 80%;
  border-collapse: collapse;
  margin: auto;
}

.info-table th,
.info-table td {
  padding: 10px;
  text-align: left;
}

.info-table th {
  background-color: #f2f2f2;
  color: #4578dc;
}

select {
  margin-left: 10px;
  padding: 5px;
  font-size: 14px;
  border-radius: 5px;
  border: 1px solid #ccc;
}

.switchs {
  text-align: left;
}

.footer {
  font-size: 24px;
  position: fixed;
  /* 固定位置 */
  bottom: 60px;
  /* 离底部 60px */
  left: 50%;
  /* 水平居中 */
  transform: translateX(-50%);
  /* 精确居中 */
  background-color: #fff;
  /* 背景色，避免与内容重叠 */
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  /* 为按钮添加阴影效果 */
  z-index: 10;
  /* 确保按钮在最上层 */
}

.search {
  display: flex;
  /* 使用 Flexbox 布局 */
  align-items: center;
  /* 垂直居中对齐 */
}

.search label {
  margin-right: 10px;
  /* 给 label 添加右边距，确保与输入框有间隔 */
}

.search .el-input {
  width: 300px;
  /* 设置输入框的宽度 */
}

.search .el-button {
  margin: 10px 30px;
}
</style>